<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<style>
body {
	background-color: rgb(200,200,200);
}

.searchHolder {
	position: absolute;
	top: 50px;
	left: 50px;
	width: 200px;
	height: 40px;
	background-color: black;
	opacity: 0.8;
    filter: alpha(opacity=80);
    z-index: 20;
    border: 1px solid silver;
}
.mainMenuHolder {
	position: absolute;
	top: 50px;
	right: 50px;
	width: 300px;
	height: 40px;
	background-color: black;
	opacity: 0.8;
    filter: alpha(opacity=80);
    z-index: 20;
    border: 1px solid silver;

}
.mapHolder {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	z-index: 10;
}
.pinBoardHolder {
	position: absolute;
	top: 100px;
	left: 50px;
	right: 50px;
	bottom: 50px;
	background-color: black;
	opacity: 0.8;
    filter: alpha(opacity=80);
    z-index: 20;
    border: 1px solid silver;
    display: none;
}
.centerHolder {
	position: absolute;
	top: 100px;
	left: 50px;
	right: 50px;
	bottom: 50px;
	background-color: black;
	opacity: 0.8;
    filter: alpha(opacity=80);
    z-index: 20;
    border: 1px solid silver;
}
.centerLeftMargin {
	left: 260px;
}
.centerRightMargin {
	right: 260px;
}
.leftHolder {
	position: absolute;
	top: 100px;
	left: 50px;
	width: 200px;
	height: auto;
	background-color: black;
	opacity: 0.8;
    filter: alpha(opacity=80);
    z-index: 20;
    border: 1px solid silver;
}
.rightHolder {
	position: absolute;
	top: 100px;
	right: 50px;
	width: 200px;
	height: 40px;
	background-color: black;
	opacity: 0.8;
    filter: alpha(opacity=80);
    z-index: 20;
    border: 1px solid silver;
}
.topMenuHolder {
	position: absolute;
	top: 5px;
	left: 50px;
	right: 50px;
	height: 30px;
	background-color: black;
	opacity: 0.8;
    filter: alpha(opacity=80);
    z-index: 10;
}

.bottomMenuHolder {
	position: absolute;
	bottom: 5px;
	left: 50px;
	right: 50px;
	height: 30px;
	background-color: black;
	opacity: 0.8;
    filter: alpha(opacity=80);
    z-index: 10;
}

.searchHolder input {
	margin: 5px;
}



</style>
</head>
<body> 






<div class="centerHolder centerLeftMargin centerRightMargin">
	&lt;?cms template.main.center cms?&gt;
</div>

<div class="leftHolder">
	&lt;?cms template.area.left cms?&gt;
</div>

<div class="rightHolder">
	&lt;?cms template.area.right cms?&gt;
</div>

<div class="searchHolder">
	&lt;?cms template.area.search cms?&gt;
</div>

<div class="mainMenuHolder">
	&lt;?cms template.menu.headerMenu cms?&gt;
</div>

<div class="topMenuHolder">
	&lt;?cms template.menu.topMenu cms?&gt;
</div>

<div class="bottomMenuHolder">
	&lt;?cms template.menu.footerMenu cms?&gt;
</div>

<div class="mapHolder">
	&lt;?cms template.area.map cms?&gt;
</div>






<!-- 
<div class="centerHolder centerLeftMargin centerRightMargin">
	&lt;?cms template.main.center cms?&gt;
</div>

<div class="leftHolder">
	&lt;?cms template.area.left cms?&gt;
</div>

<div class="rightHolder">
	&lt;?cms template.area.right cms?&gt;
</div>

<div class="mapHolder"></div>

<div class="searchHolder">
	<input type="text" placeholder="Search For pin boards" />
</div>

<div class="pinBoardHolder hide">
	<div class="buttonsHolder">
		<div class="closePinBoard">
		</div>
		<div class="closePinBoard">
		</div>
		
	</div>

</div>

<div class="mainMenuHolder">
	&lt;?cms template.menu.headerMenu cms?&gt;
</div>

<div class="topMenuHolder">
	&lt;?cms template.menu.topMenu cms?&gt;
</div>

<div class="bottomMenuHolder">
	&lt;?cms template.menu.footerMenu cms?&gt;
</div>


<script>



jQuery(document).ready(function () {
    var map;

    var style = [
        {
        stylers: [
            { saturation: "-100" },
            { lightness: "20" }
        ]
        },{
        featureType: "poi",
        stylers: [
            { visibility: "off" }
        ]
        },{
        featureType: "transit",
        stylers: [
            { visibility: "off" }
        ]
        },{
        featureType: "road",
        stylers: [
            { lightness: "50" },
            { visibility: "on" }
        ]
        },{
        featureType: "landscape",
        stylers: [
            { lightness: "50" }
        ]
        }
    ]

    var options = {
        zoom: 7,
        center:  new google.maps.LatLng(45.50867, -73.553992),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true
    };

    map = new google.maps.Map($('.mapHolder')[0], options);
    map.setOptions({
        styles: style
    });

});










</script>
 -->
</body>
</html>